<template>
  <view class="order-detail-page">
    <!-- 订单状态 -->
    <view class="order-head">
      <uni-icons type="checkbox-filled" color="#16C2A3" size="50" />
      <view class="status">订单已支付</view>
      <view class="tip">请耐心等待发货</view>
    </view>

    <!-- 收货地址 -->
    <view class="order-address">
      <view class="user">
        {{ orderDetail?.addressInfo?.receiver }}
        {{ orderDetail?.addressInfo?.mobile?.replace(/(\d{3})(\d{4})(\d{4})/, '$1****$3') }}
      </view>
      <view class="address">
        {{ orderDetail?.addressInfo?.province }} {{ orderDetail?.addressInfo?.city }}
        {{ orderDetail?.addressInfo?.county }} {{ orderDetail?.addressInfo?.addressDetail }}
      </view>
    </view>

    <!-- 物流信息 -->
    <view class="order-address" @click="handleExpress">
      <view class="address">
        {{ orderDetail?.expressInfo?.content ?? '暂无物流信息' }}
      </view>
    </view>

    <!-- 药品信息 -->
    <view class="order-medical">
      <view class="title">优医药房</view>
      <view class="items">
        <view class="item" v-for="med in orderDetail?.medicines" :key="med.id">
          <image class="image" :src="med.avatar" mode="aspectFill" />
          <view class="info">
            <view class="name">{{ med.name }}</view>
            <view class="specs">{{ med.specs }}</view>
            <view class="price">￥{{ med.amount }}</view>
          </view>
          <view class="quantity">x{{ med.quantity }}</view>
        </view>
      </view>
    </view>

    <!-- 订单信息 -->
    <view class="order-info">
      <view class="title">订单信息</view>
      <view class="items">
        <view class="item">
          <view class="label">订单编号</view>
          <view class="value">{{ orderDetail?.orderNo }}</view>
        </view>
        <view class="item">
          <view class="label">创建时间</view>
          <view class="value">{{ orderDetail?.createTime }}</view>
        </view>
        <view class="item">
          <view class="label">支付时间</view>
          <view class="value">{{ orderDetail?.payTime }}</view>
        </view>
      </view>
    </view>

    <!-- 支付信息 -->
    <view class="order-payment">
      <view class="item">
        <view class="label">药品金额</view>
        <view class="value">￥{{ orderDetail?.payment }}</view>
      </view>
      <view class="item">
        <view class="label">配送费</view>
        <view class="value">￥{{ orderDetail?.expressFee }}</view>
      </view>
      <view class="item">
        <view class="label">优惠券</view>
        <view class="value">-￥{{ orderDetail?.couponDeduction }}</view>
      </view>
      <view class="item">
        <view class="label">实付金额</view>
        <view class="value">￥{{ orderDetail?.actualPayment }}</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { useOrderDetail } from '@/hooks'

const props = defineProps<{
  id: string
}>()

// 获取订单详情
const { orderDetail } = useOrderDetail(props.id)

// 物流信息
const handleExpress = () => {
  uni.navigateTo({
    url: '/subpkg_medicine/timeline/timeline?orderId=' + orderDetail.value?.id,
  })
}
</script>

<style lang="scss">
.order-detail-page {
  padding: 0 0 100rpx;
  min-height: 100vh;
  background-color: #f6f6f6;
}

.order-head {
  padding: 40rpx 32rpx;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;

  .status {
    font-size: 32rpx;
    margin-top: 20rpx;
  }

  .tip {
    font-size: 26rpx;
    color: #848484;
    margin-top: 10rpx;
  }
}

.order-address {
  margin: 20rpx 0;
  padding: 30rpx;
  background-color: #fff;

  .user {
    font-size: 28rpx;
    margin-bottom: 10rpx;
  }

  .address {
    font-size: 26rpx;
    color: #848484;
  }
}

.order-medical {
  padding: 30rpx;
  background-color: #fff;
  margin-bottom: 20rpx;

  .title {
    font-size: 30rpx;
    margin-bottom: 20rpx;
  }

  .items {
    .item {
      display: flex;
      padding: 20rpx 0;
      border-bottom: 1rpx solid #eee;

      &:last-child {
        border-bottom: none;
      }

      .image {
        width: 120rpx;
        height: 120rpx;
        border-radius: 4rpx;
      }

      .info {
        flex: 1;
        margin: 0 20rpx;

        .name {
          font-size: 28rpx;
        }

        .specs {
          font-size: 24rpx;
          color: #848484;
          margin: 10rpx 0;
        }

        .price {
          font-size: 26rpx;
          color: #16c2a3;
        }
      }

      .quantity {
        font-size: 26rpx;
        color: #848484;
      }
    }
  }
}

.order-info {
  padding: 30rpx;
  background-color: #fff;
  margin-bottom: 20rpx;

  .title {
    font-size: 30rpx;
    margin-bottom: 20rpx;
  }

  .items {
    .item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 15rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .label {
        font-size: 26rpx;
        color: #848484;
      }

      .value {
        font-size: 26rpx;
        color: #121826;
      }
    }
  }
}

.order-payment {
  padding: 30rpx;
  background-color: #fff;

  .item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15rpx;

    &:last-child {
      margin-bottom: 0;
      .value {
        color: #16c2a3;
        font-size: 30rpx;
      }
    }

    .label {
      font-size: 26rpx;
      color: #848484;
    }

    .value {
      font-size: 26rpx;
      color: #121826;
    }
  }
}
</style>
